<template>
  <div>
    <el-card v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)" class="board-hover">
      <div slot="header">
        <span class="title">用户登录列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="getlist()" />
        <span class="tip">每分钟自动刷新:{{ loadTime }}</span>
      </div>
      <el-table v-loading="loading" :data="dataList" :row-style="{ height: '32px' }" :cell-style="{ padding: '0px' }"
        :max-height="460" border :row-class-name="tableRowClassName" highlight-current-row>
        <el-table-column label="编码" width="80" align="center" prop="userCode" fixed show-overflow-tooltip />
        <el-table-column label="状态" width="80" align="center" prop="statusName" fixed />
        <el-table-column label="登录时间" width="180" align="center" prop="loginTime" />
        <el-table-column label="登出时间" width="180" align="center" prop="logoutTime" />
        <el-table-column label="操作页面" width="300" align="center" prop="lastPageName" show-overflow-tooltip />
        <el-table-column label="错误消息" width="300" align="center" prop="err" show-overflow-tooltip />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getUserList } from "@/api/aitcommon/appLogin";

export default {
  name: "appUserList",
  components: {  },
  data() {
    return {
      dataList: [],
      loading: false,
      loadTime: '',
      // 定时刷新(秒)
      timeSec: 60,
      timeChecked: true,
      timer: {},
    }
  },
  created() {
    this.getlist();

    // 设置定时刷新
    if (this.timeChecked) {
      this.timer = window.setInterval(this.getlist, this.timeSec * 1000);
    } else {
      window.clearInterval(this.timer);
    }
  },
  methods: {
    getlist() {
      this.loading = true;
      getUserList().then(res => {
        // console.info('getlist',res.data);
        this.loadTime = this.parseTime(new Date());
        this.dataList = res.data
        // console.info('getlist',this.dataList)
      }).finally(() => {
        this.loading = false;
      })
    },
    tableRowClassName({ row, rowIndex }) {
      // tablerow的样式,需要在ait.scss中设置
      let className="";
      if(rowIndex%2==0)
        className+=" trip-row "

      if(row.status==0)//登录
        return className+=' complete-row ';
      else if(row.logStatus==1)//登出
        return className+=' disable-row ';
      else if(row.logStatus==2)//异常
        return className+=' abnormal-row ';

      return className;
    },
  }
}
</script>

<style lang="scss" scoped>
.board-hover {
  &:hover {
    box-shadow: 0 2px 12px 0 brown;
  }
}

.tip {
  float: right;
  color: gray;
  font-size: 10px;
  margin-right: 10px;
}

.title{
  &:hover {
    color: brown;
    text-shadow: 2px 2px 5px;
  }
}

.desc{
  margin: 0 10px;
  color: gray;
  font-style: italic;
}

</style>